<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt="" />
  </div>
  <el-page-header @back="goBack" content="密码安全" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <el-form
        autocomplete="on"
        :model="pd"
        ref="pd"
        label-position="left"
        :rules="rules"
      >
        <h2>修改密码</h2>
        <el-form-item prop="oldPw">
          <el-input
            name="CustomerId"
            type="text"
            v-model="pd.oldPw"
            autocomplete="on"
            placeholder="请输入旧密码"
            clearable
            show-password
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;font-size: 18px">旧密码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPw">
          <el-input
            name="PassWord"
            type="text"
            v-model="pd.newPw"
            autocomplete="on"
            placeholder="请输入新密码"
            clearable
            show-password
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="color: #0e0d0c;font-size: 18px">新密码</div></template>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px">
          <el-button
            style="width: 40%;background: darkslateblue;font-size: 18px"
            type="primary"
            :loading="loading"
            @click.native.prevent="change"
          >修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        rules: {
          oldPw: [{required: true, message: '旧密码不能为空', trigger: 'blur'}],
          newPw: [{required: true, message: '新密码不能为空', trigger: 'blur'}]
        },
        pd: {
          oldPw: "",
          newPw: ""
        },
      };
    },
    methods: {
      goBack(){
        this.$router.go(-1);
      },
      change(){
        this.$refs.pd.validate(valid => {
          if (valid) {
        let list={
          oldPw:this.pd.oldPw,
          newPw:this.pd.newPw,
          Id:this.$store.state.customerId
        };
        this.$confirm('是否确认修改?', '提示', {
        }).then(() => {
          this.$axios.post('/user/change',list)
            .then(resp => {
              if(resp.data.code==200){
                this.$alert("修改成功!", '提示', {
                  confirmButtonText: '确定'
                });
                this.$router.go(-1);
              }
              else{
                this.$alert(resp.data.msg, '提示', {
                  confirmButtonText: '确定'
                });
              }
            })
        }).catch(() => { this.$message({
          message: '取消修改',
          type: 'failed'
        })});
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      }
    }
  };
</script>

<style scoped>
  .background{
    width:100%;
    height:100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }
  .card{
    position: relative;
    margin-top: 13%;
    margin-left: 38%;
    padding: 1em;
    max-width: 26em;
    background: hsla(0,0%,50%,.25) border-box;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
  }
</style>
